<template>
  <div class="shop">
    <p class="shop_title">购物车</p>
    <p class="show" v-if="isShow" v-show="isLongin">还没有商品哦</p>
    <p class="show" v-if="!isLongin">请先登录</p>
    <ul>
      <li v-for="(i, index) in list" :key="index">
        <van-card :price="i.price" :title="i.name" :thumb="i.img">
          <template #footer>
            <van-stepper v-model="i.num" integer />
          </template>
        </van-card>
      </li>
    </ul>

    <div class="bottom">
      <van-submit-bar :price="prices" button-text="提交订单" @submit="onSubmit">
        <!-- <van-checkbox v-model="checked">全选</van-checkbox> -->
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getFunc } from "@/http/request.js";
import { Toast } from "vant";
export default {
  name: "ShopCar",
  data() {
    return {
      checked: true,
      value: 0,
      list: [],
      isShow: true,
      isLongin: false,
    };
  },
  methods: {
    onSubmit() {
      let order_form2 = [];
      if (this.user) {
        if (this.list) {
          order_form2 = [...this.order_form, ...this.shop_car];
          this.$store.dispatch("setOrderFormAsync", order_form2);
          Toast("购买成功");
        } else {
          Toast("购买失败");
        }
      } else {
        Toast("请先登录");
      }

      this.$store.dispatch("setShopCarAsync", []);
      this.list = [];
      Toast("购买成功");
    },
    async initList(data) {
      // 请求服务器获取美食信息
      await getFunc(`/cate/detail?cate_id=${data}`).then((data) => {
        if (data.code == 200) {
          this.list.push(data.result[0]);
        }
      });
      this.isShow = false;
    },
  },
  computed: {
    ...mapState(["shop_car", "order_form", "user"]),
    prices() {
      let sum = 0;
      this.list.forEach((i) => {
        sum += i.num * i.price;
      });

      return sum * 100 || 0;
    },
  },
  mounted() {
    if (this.user.userName) {
      this.isLongin = true;
    }

    this.shop_car.forEach((item) => {
      this.initList(item.cid);
    });
  },
};
</script>

<style lang='scss' scoped>
.shop_title {
  text-align: center;
  height: 15vw;
  line-height: 15vw;
  font-size: 5.5vw;
  background-color: #eee;
}
.show {
  text-align: center;
  margin-top: 10vw;
}
.van-submit-bar {
  bottom: 13.6vw;
}
</style>